<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <h1 :style="{key(样式名-驼峰式写法):value(样式值)}">{{msg}}</h1> -->
        <h1 :style="{fontSize:'200px'}">{{msg}}</h1>
        <!-- 加单引号：vue会把其当成字符串去解析。   不加单引号：vue会当成变量去解析 -->
        <h1 :style="{fontSize:finalSize + 'px'}">{{msg}}</h1>
        <h1 :style="{color:finalColor}">{{msg}}</h1>
    </div>
</body>
<script src="../js/http_cdn.bootcdn.net_ajax_libs_vue_2.6.6_vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"你好",
            finalSize:'140',
            finalColor:'red',
        }
    })
</script>
</html>
